<!-- eslint-disable vue/multi-word-component-names -->
<template >
   
    <div id="building">
      
       
        <div class="l-content">
            <h3 id="title" >软件售后管理系统</h3>
        </div> <!--左部分-->
       
       

     <div id="title1">
         <el-form   class="register" :model="form" :rules="rules" ref="forget"> <!-- 加:inline="true" 行内表单-->
             <h3 id="title2">忘记密码</h3>
 
             <el-form-item label="密码" prop="password" >
                 <el-input type="password" v-model="form.password" placeholder="请输入新密码" prefix-icon="el-icon-lock" ></el-input>
             </el-form-item>
 
  
             <el-form-item label="重复密码" prop="passwordagin" >
                  <el-input type="password" v-model="form.passwordagin" placeholder="请重复密码" prefix-icon="el-icon-lock" ></el-input>
             </el-form-item>

             

             <el-form-item label="账号" prop="userName" >
              <el-input v-model="form.userName" placeholder="请输入账号" prefix-icon="el-icon-user">
                <el-button @click="verifyCode"  slot="append">发送验证码</el-button> 
              </el-input>
              
              <!--  slot="append" class="my-input"-->
             </el-form-item>

             

             <el-form-item label="请输入验证码" prop="verifyCode" >
                 <el-input v-model="form.verifyCode" placeholder="请输入验证码" prefix-icon="el-icon-message">
                     
                 </el-input>  
                 <!-- v-model为数据绑定 placeholder为输入框默认显示-->
             </el-form-item>

         <el-row >
            <el-col :span="12">
            <el-form-item>
                <el-button  type="primary" id="register-1" @click="dialogVisible = true">确定</el-button>
                <!-- @click="submit" 绑定点击事件 -->
            </el-form-item>
            </el-col>

            <el-col :span="12">
            <el-form-item>
                <el-button  type="primary"  id="register-2" @click="$router.push('/Login')">返回</el-button>
                <!-- @click="submit" 绑定点击事件 -->
            </el-form-item>
            </el-col>
         </el-row>

     </el-form>
     </div>


        <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        append-to-body
        top="20%"
     ><!-- append-to-body出现不会屏幕变暗,top位置下调 -->
        <span>确认重置密码吗</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="determine">确 定</el-button>
        </span>
        </el-dialog>
     
        <el-dialog
        title="提示"
        :visible.sync="error"
        width="30%"
        append-to-body
        top="20%"
     ><!-- append-to-body出现不会屏幕变暗,top位置下调 -->
        <span> {{ dmessage }}</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="error = false">取 消</el-button>
            <el-button type="primary" @click="error = false">确 定</el-button>
        </span>
        </el-dialog>
     
    
    </div> 
 </template>
 
 
 <script>

import http from '@/utils/request';
import bcrypt from 'bcryptjs'
import { forget } from '@/api/login';

 export default {
     data(){
         return{
             dmessage: '', //后端返回的文本提示信息
             dialogVisible: false, //弹出框显示
             error: false,//弹出框显示
             url: '',
             urlList: [],
             timer: null,
             form:{
                 userName:'',
                 password:'',
                 passwordagin:'',
                 verifyCode:'',
             },//数据定义
             
             rules:{
                 userName:[
                     {required:true,trigger:'blur',message:'请输入账号'}
                 ],
                 password:[
                     {required:true,trigger:'blur',message:'请输入新密码'}
                 ],
                 passwordagin:[
                     {required:true,trigger:'blur',message:'请重复密码'}//
                 ],
                 verifyCode:[
                     {required:true,trigger:'blur',message:'请输入验证码'}//
                 ],
             } //数据校验定义,rules:{}为对象变量
         }
     
     },
     methods:{
          //发送验证码
          verifyCode(){
            let formData = {
                userName: this.form.userName
            };
            console.log(formData)
            //给后端发送加上用户名的url
            
            http.get(`/user/getforgetcode?${new URLSearchParams(formData).toString()}`)
                .then(response => {
                    console.log(response.data)
                    if(response.data.code ==200){
                        this.dmessage = response.data.msg; 
                        this.error=true;
                        // this.$message.success(response.data.msg);
                    }else{
                        this.dmessage = response.data.msg;
                        console.log(this.dmessage) 
                        this.error=true
                        // this.$message.error(response.data.msg);
                    }
                })
                .catch(error => console.error(error));

        },
        //重置密码
        determine(){


             // var salt = bcrypt.genSaltSync(12);    //定义密码加密的计算强度,默认10
             var hash = bcrypt.hashSync(this.form.password, '$2a$12$c2Sr/uy88pQhDkzKhWF4we');    //把自己的密码(this.user.password)带进去,变量hash就是加密后的密码
            
            this.$refs.forget.validate((valid) => {
            // 校验通过
            if (valid) {
              if(this.form.password == this.form.passwordagin){
                    forget({ userName:this.form.userName,
                    password:hash,
                    verifyCode:this.form.verifyCode}).then(({ data }) => {
                        console.log(data)
                        
                        if (data.code == 200) {
                            //注册成功提示
                            this.$message.success(data.msg);
                            // 跳转到登录页
                            this.$router.push('/Login')
                        } else if(data.code == 401){
                            this.dialogVisible = false;
                            this.dmessage = data.msg; 
                            this.error=true;
                            // this.$message.error(data.msg);
                        } else{
                            this.dialogVisible = false;
                            this.dmessage = data.msg; 
                            this.error=true;
                            // this.$message.error("修改失败");
                        }
                    })
              } else{
                 this.dialogVisible = false;
                 this.dmessage = "两次输入的密码不一致"; 
                 this.error=true;
                //  this.$message.error("两次输入的密码不一致");
              }
           } else{
                 this.dialogVisible = false;
                 this.dmessage = "还有未输入的信息"; 
                 this.error=true;
                //  this.$message.error("还有未输入的信息");
           }
       })
     },


    },     
}
     

 </script>
 
 <!-- scoped属性的作用是将当前标签下的样式私有化，仅对当前组件起作用 -->
 <style scoped> 
 #building{
   background:url("../assets/Loginbackgrand.jpeg");
   width:100%;
   height:100%;
   position:fixed;
   background-size:100% 100%;
   overflow: auto;
 }
 
 
 .register{
     width:  350px;
     height: 600px;
     margin: 40px auto;
     padding: 30px;
     border: 1px solid #eaeaea;
     background-color: #fff;
     /* border-radius: 15px;  圆角 */
     box-shadow: 0 0 25px #cac6c6 ;
     /*阴影  */
     box-sizing: border-box;
     
 }
 /* width:  350px;
     height: 450px;
     margin: 180px auto;
     margin-top: 40px;
     padding: 30px;
     border: 1px solid #eaeaea;
     background-color: #fff;
     border-radius: 15px;  圆角 
     box-shadow: 0 0 25px #cac6c6 ;
     
     box-sizing: border-box; */
 .el-input{
    /* 全局设置输入框 */
    width: 290px;
    /* display:block; */
    /* height: 40px; */
    border-radius: 7px 0 0 7px;
    /* display: inline-block; */
 }
 #title{
     color: #3e3a3a;
     margin-top: 10px;
     font-size: 45px;
 }
 .l-content{
    text-align: center;
 }
/* 标题居中 */

 #title1{
     text-align: center;
 }
 #title2{
     color: #000;
     text-align: center;
     margin-bottom: 15px;
     margin-top: 1px;
     font-size: 30px;
 }
 
 #register-1{
     margin-left: 0px;
     margin-top: 20px;
     width: 100px;
     
 }
 #register-2{
    margin-left: 45px;
    margin-top: 20px;
    width: 100px;
 }


 
/* .my-input{
    width: 200px;
    margin-bottom: 10px;
   
} */
 /* 邮箱输入框样式 */

/* ::v-deep .el-form-item__label {
  text-align: left;
  float: none;
  word-break: break-word;
}  */
/* 加scoped强制label和input换行 */

/* 验证码按钮样式 */
/* .btn-code {
  display: inline-block;
  width: 10px;
  
} */
 </style>